/**
 * Created by <a href="mailto:qq2325690622@gmail.com">邓超</a> on 2017/5/7.
 */
/// <reference path="../typings/globals/jquery/index.d.ts" />
const root = "http://baihechou.club/";
const api = root + "api/";
const articleDetail = api + "advert/article";
const avatarPrefix = root + "public/uploads/api/";

//noinspection JSUnusedGlobalSymbols
function onLoad(articleId: number) {
    $.post(
        articleDetail,
        {'article_id': articleId, 'user_id': 1},//no side effect
        function (response) {
            console.log(response);
            let comments: CommentInfo[] = response.data.articleComment;//从response中取出data中的文章评论
            let recentCommentsContainer = $('#recentCommentsContainer');
            if (comments.length > 3) {
                comments.slice(0, 3).forEach(function (it) {
                    recentCommentsContainer.append(getCommentItem(it));
                });
                let hiddenCommentsContainer = $('#hiddenCommentsContainer');
                comments.slice(3, comments.length).forEach(function (it) {
                    hiddenCommentsContainer.append(getCommentItem(it));
                })
            } else {
                let moreComments = $('#moreComments');
                if (comments == null || comments.length == 0) {
                    moreComments.html("暂无评论").css("color", "#999999").attr("onclick", null);
                    return;
                }
                moreComments.hide();
                comments.forEach(function (it) {
                    recentCommentsContainer.append(getCommentItem(it));
                })
            }
        }, "json");
}

/**
 * 根据一条评论对象生成对应的元素
 * 应利用commentItem.html进行单元测试,以及预览
 */
function getCommentItem(comment: CommentInfo): string {
    let user = comment.user;
    if (user.username == null || user.username.length == 0) {
        user.username = "无名";
    }
    if (user.avatar == null || user.avatar.length == 0) {
        user.avatar = "../img/default_avatar.png";
    } else {
        user.avatar = avatarPrefix + user.avatar;
    }
    return `
<table class="itemTable">
    <tr>
        <td class="itemTd1">
            <img src="${user.avatar}" class="itemUserAvatar">
        </td>
        <td class="itemTd2">
            <div class="itemUserName">${user.username}</div>
            <div class="itemTimestamp">${getFormattedTimestamp(comment.timestamp)}</div>
        </td>
    </tr>
    <tr>
        <td  class="itemTd1"></td>
        <td class="itemTd2">
            <div class="itemContent">${comment.content}</div>
        </td>
    </tr>
</table>`;
}

/**
 * 格式化时间戳
 * @param timestamp 时间戳,s
 */
function getFormattedTimestamp(timestamp: string): string {
    let date = new Date(Number(timestamp) * 1000);
    return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
}

//noinspection JSUnusedGlobalSymbols
/**
 * 当查看更多评论按钮按下时显示全部评论并隐藏按钮
 */
function showAllComments() {
    $('#hiddenCommentsContainer').slideDown();
    $('#moreComments').hide();
}

interface UserInfo {
    username: string;
    avatar: string;
}

interface CommentInfo {
    content: string;
    timestamp: string;
    user: UserInfo;
}
